import React, {Component} from 'react'
export default class ScrollTop extends Component {
    constructor(props) {
        super(props)
        this.state = {
            hideTop: 'none'
        }
    }
    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll.bind(this));
    }

    componentWillUnmount(){
        window.removeEventListener('scroll', this.handleScroll.bind(this));
    }

    handleScroll(e) {
        //获取滚动条高度
        var ostop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        //获取窗口可视区域高度
        var ch = document.documentElement.clientHeight || document.body.clientHeight;
        //如果页面超过一屏高度按钮显示，否则隐藏
        this.setState({
        hideTop: ostop >= ch ? 'block' : 'none'
        })
    }

    backTop(){
        var timer;
        //创建定时器
        timer=setInterval(function(){
        //获取滚动条高度
        var ostop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        //每次上升高度的20%
        var speed = Math.ceil(ostop/5);
        //每次上升当前高度的80%
        document.documentElement.scrollTop = document.body.scrollTop = ostop - speed;
        //如果高度为0，清除定时器
        if(ostop == 0){
            clearInterval(timer);
        }
        },30);
    }

    show(type, show){
        this.setState({
            [`show_${type}`]: show
        })
    }
    render() {
        const { hideTop } = this.state
        return (
            <div className='gbtn'>
                <a href='javascript:;' onMouseOver={() => this.show('shang',1)} onMouseOut={() => this.show('shang',0)} className='btn shang'><i className='iconfont'>&#xe64b;</i>打个赏呗</a>
                <a href='javascript:;' onMouseOver={() => this.show('weixin',1)} onMouseOut={() => this.show('weixin',0)} className='btn weixin'><i className='iconfont'>&#xe64a;</i>官方微信</a>
                <a href='http://bbs.99496.com/55' target='_blank' className='btn ttop' title='留言反馈'><i className='iconfont'>&#xe634;</i>留言反馈</a>
                <a href='mailto:ly@99496.com' className='btn ttop' title='若本站的引用侵犯了您的利益，请联系我们核查所实后将在第一时间删除'><i className='iconfont'>&#xe612;</i>联系我们</a>
                <a href='//weibo.com/dm99496' target='_blank' className='btn ttop' title='关注微博'><i className='iconfont'>&#xe630;</i>关注微博</a>
                <a href='javascript:;' onClick={() => this.backTop()} style={{display: hideTop}} className='btn ttop' id='back-to-top' title='返回顶部'><i className='iconfont'>&#xe609;</i>返回顶部</a>
                <div id='shang' style={{display: this.state.show_shang ? 'block' : 'none'}}>
                    <div><img src='//ww2.sinaimg.cn/large/006bnWk0gw1f2diiqrbppj30i80i8wer.jpg' /><p>支付宝扫一下</p></div>
                    <div><img src='//ww3.sinaimg.cn/large/006bnWk0gw1f2dij1rsnqj308s08sgmc.jpg' /><p>微信扫一下</p></div>
                </div>
                <div id='weixin' style={{display: this.state.show_weixin ? 'block' : 'none'}}><img src='//ww4.sinaimg.cn/large/006bnWk0gw1f2so26vlqej30go0goq41.jpg' /><p>关注官方微信<br />微信扫一下</p></div>
            </div>
        )
    }
}